<template>
  <a-form
    :form="form"
    :label-col="{ span: 10 }"
    :wrapper-col="{ span: 12 }"
    @submit="handleSubmit"
  >
    <a-row>
      <a-col
        :span="item.type == 'table' ? 24 : 24 / col"
        v-for="(item, index) in formOptions"
        :key="index"
      >
        <!-- 表单项 -->
        <a-form-item
          :wrapper-col="{ span: item.type == 'table' ? 24 : 12 }"
          :label="item.label"
        >
          <!-- 日期 -->
          <a-date-picker
            v-if="item.type == 'date'"
            :disabled="item.disabled"
            :show-time="item.showTime"
            v-decorator="[
              item.value,
              { initialValue: defaultFormData[item.value], rules: item.rules }
            ]"
          ></a-date-picker>

          <!-- 下拉框 -->
          <a-select
            v-else-if="item.type == 'select'"
            :disabled="item.disabled"
            v-decorator="[
              item.value,
              { initialValue: defaultFormData[item.value], rules: item.rules }
            ]"
          >
            <a-select-option
              v-for="option in item.options"
              :key="option.value"
              :value="option.value"
              >{{ option.label }}</a-select-option
            >
          </a-select>

          <a-radio-group
            v-else-if="item.type == 'radio'"
            :disabled="item.disabled"
            v-decorator="[
              item.value,
              { initialValue: defaultFormData[item.value], rules: item.rules }
            ]"
          >
            <a-radio
              v-for="option in item.options"
              :key="option.value"
              :value="option.value"
            >
              {{ option.label }}
            </a-radio>
          </a-radio-group>

          <!-- table输入框 -->
          <a-table
            v-else-if="item.type == 'table'"
            bordered
            :columns="item.options"
            :data-source="defaultFormData[item.value]"
            :pagination="false"
            :rowKey="
              (record, index) => {
                return index;
              }
            "
          >
            <template
              v-for="column in item.options"
              :slot="column.dataIndex"
              slot-scope="text, record, index"
            >
              <a-month-picker
                v-if="column.type == 'month'"
                v-model="text"
                :key="column.dataIndex"
                @change="
                  tableDataChange(text, index, column.dataIndex, item.value)
                "
              />
              <a-input
                v-else
                v-model="text"
                :key="column.dataIndex"
                :disabled="column.disabled"
                @change="
                  tableDataChange(text, index, column.dataIndex, item.value)
                "
              ></a-input>
            </template>
          </a-table>

          <!-- input框 -->
          <a-input
            v-else
            :disabled="item.disabled"
            v-decorator="[
              item.value,
              { initialValue: defaultFormData[item.value], rules: item.rules }
            ]"
          ></a-input>
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item
      v-if="footer"
      :wrapper-col="{
        xs: { span: 24, offset: 0 },
        sm: { span: 16, offset: 8 }
      }"
    >
      <a-button type="primary" html-type="submit">
        提交
      </a-button>
    </a-form-item>
    <slot name="footer"></slot>
  </a-form>
</template>

<script>
export default {
  naem: "form",
  props: {
    //是否显示提交按钮
    footer: {
      type: Boolean,
      default: true
    },
    //表单列数
    col: {
      type: Number,
      default: 1
    },
    //表单框架配置
    formOptions: {
      type: Array,
      default: () => {
        return [];
      }
    },
    //表单默认数据
    defaultFormData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
      tableListObj: {}
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          for (let key in this.tableListObj) {
            values[key] = this.tableListObj[key];
          }
          this.$emit("submit", values);
        }
      });
    },
    //table中的数据变化
    tableDataChange(value, rowIndex, columnKey, tableKey) {
      this.tableListObj[tableKey].forEach((item, index) => {
        if (index == rowIndex) {
          item[columnKey] = value;
        }
      });
      console.log("change", this.tableListObj);
    },
    //类型为table的表单项，将所有table的数据封装到一个对象(tableListObj)中
    initTable() {
      this.formOptions.forEach(e => {
        if (e.type == "table") {
          this.tableListObj[e.value] = this.defaultFormData[e.value];
        }
      });
    }
  },
  created() {
    this.initTable();
  }
};
</script>
